﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Telephone Order Placement System</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: #d6d6d6;
}
.container {
	width: 800px;
	height: 600px;
}
.menu {
	float: left;
	width: 200px;
	height: 600px;
}
.contents {
	float: left;
	width: 600px;
	height: 600px;
}
.top {
	float: left;
	width: 570px;
	height: 75px;
	line-height: 75px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #666666;
	text-align: left;
	background-image: url(img/c_registration/top.jpg);
	padding-left: 30px;
}
ul.nav {
	list-style: none;
}
ul.nav li{
	height: 75px;
	width: 200px;
}
a {
	outline:0; 
	text-decoration: none;
}
ul.nav a{
	background-image: url(img/menu/menu.jpg);
	height: 52px;
	width: 130px;
	margin-right: 10px;
	margin-bottom: 7px;
	margin-left: 10px;
	padding-left: 50px;
	padding-top: 8px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	background-repeat: no-repeat;
}
ul.nav a.sel{
	background-image: url(img/menu/menu_s.jpg);
	color: #FFF;
}
ul.nav a:hover{
	background-image: url(img/menu/menu.jpg);
	background-position: 0px -60px;
}
ul.nav a:hover.sel{
	background-image: url(img/menu/menu_s.jpg);
}
.top a{
	color: #666;
}
.top a:hover{
	color: #000;
}
.main{
	height: 525px;
	width: 600px;
	float:left;
}
.main_1{
	height: 375px;
	width: 560px;
	margin-top: 75px;
	margin-right: 20px;
	margin-left: 20px;
}
.main_2{
	height: 75px;
	width: 560px;
	margin-right: 20px;
	margin-left: 20px;
}
label{
	border: 1px solid #333;
	line-height: 24px;
	display: block;
	height: 24px;
	text-align: center;
	float: left;
	margin-right: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
	background-color: #666;
	width: 80px;
	font-size: 12px;
}
input, select{
	border: 1px solid #333;
	height: 24px;
	float: left;
	display: block;
	width: 186px;
	margin-right: 5px;
}
input:hover{
	background-color: #FF9;
}
.main_1 span{
	display: block;
	height: 26px;
	width: 560px;
	float: left;
	margin-bottom: 10px;
}
.main_2 span{
	display: block;
	height: 60px;
	width: 180px;
	float: right;
	background-color: yellow;
	background-image: url(img/menu/submit.jpg);
	background-repeat: no-repeat;
	margin-top: 7px;
	margin-right: 10px;
	margin-bottom: 8px;
	margin-left: 10px;
}

.main_2 span:hover{
	background-image: url(img/menu/submit.jpg);
	background-position: 0px -60px;	
}
.main_2 a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	display: block;
	padding-left: 50px;
	padding-top: 20px;
	height: 40px;
	width: 130px;
}
.main_3 span{
	display: block;
	height: 60px;
	width: 180px;
	float: right;
	background-color: yellow;
	background-image: url(img/menu/submit.jpg);
	background-repeat: no-repeat;
	margin-top: -73px;
	margin-right: 400px;
	margin-bottom: 8px;
	margin-left: 10px;
}

.main_3 span:hover{
	background-image: url(img/menu/submit.jpg);
	background-position: 0px -60px;	
}
.main_3 a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	display: block;
	padding-left: 50px;
	padding-top: 20px;
	height: 40px;
	width: 130px;
}
span.empty{
	margin-left: 87px;
	width: 473px;
}
input.long{
	width: 466px;
}
</style>
</head>

<body>
<div class="container">
	<!-- menu -->
<div class="menu">
    	<ul class="nav">
        	<span style="display:block; height:8px"></span>
        	<li><a class="sel" href="#">Customer<br />Registration</a></li>
            <li><a href="#">Customer<br />Enquiry</a></li>
            <li><a href="#">Product<br />Enquiry</a></li>
            <li><a href="#">Create<br />Order</a></li>
            <li><a href="#">Order<br />Enquiry</a></li>
            <li><a href="#">Record<br />CEP</a></li>
            <li><a href="#">Prepare<br />CDR</a></li>
            <li><a href="#">Log<br />Out</a></li>
        </ul>
    </div>
    <!-- end.menu -->
    
    <!-- contents -->
  <div class="contents">
    	<div class="top"><a href="./main.html">Home</a> > <a href="./c_registration.html">Customer Registration</a> > Customer Confirmation </div>
      <div class="main">
        <form action="#" method="post" name="c_reg">
        	<div class="main_1">
           	  <span><label>Title</label><input name="title" type="text" value="Mr"/></span>
              <span><label>First Name</label><input name="f_name" type="text" value="Michael"/><label>Last Name</label><input name="l_name" type="text" value="Barrack"/></span>
              <span><label>Address</label><input class="long" name="address_1" type="text" value="123 Quay St"/></span>
              <span class="empty"><input class="long" name="address_2" type="text" /></span>
              <span><label>Suburb</label><input name="suburb" type="text" value="SurryHill"/><label>Postcode</label><input name="postcode" type="text" value="2012"/></span>
              <span><label>State</label><select name="state">
                <option value="ACT">act</option>
                <option value="NSW">nsw</option>
                <option value="QLD">qld</option>
                <option value="SA">sa</option>
                <option value="VIC">vic</option>
                <option value="WA">wa</option>
                <option value="TAS">tas</option>
                <option value="NT">nt</option>
              </select></span>
              <span><label>Phone 1</label><input name="phone_1" type="text" value="9999 1234"/><label>Phone 2</label><input name="phone_2" type="text" /></span>
              <span><label>Phone 3</label><input name="phone_3" type="text" /></span>
        	</div>
	    <div class="main_2">
            	<span><a href="main.html">Save</a></span>
            </div>
            <div class="main_3">
            	<span><a href="c_registration.html">Edit</a></span>
            </div>
        </form>
      </div>
  </div>
    <!-- end.contents -->
    
</div>
</body>
</html>
